<template>
  <el-dialog v-model="dialogVisible" class="upload-picture" width="60%">
    <!-- 标题 -->
    <template #header>
      <div class="dialog-title">
        <SvgIcon icon="ep:picture-filled"/>
        <span>{{ dialogTitle }}</span>
      </div>
    </template>

    <div class="upload-body">
      <div class="category">
        <el-tree :data="treeData" default-expand-all highlight-current node-key="id">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <div class="file-name">
                <!-- <img v-if="!data.pid" :src="file" alt="" class="icon"/>-->
                <span class="line-ellipsis-1" style="display: block">{{ data.name }}</span>
              </div>
              <div>
                <el-dropdown @command="(command: any) => dropdownCommand(data, command)">
                  <svg-icon icon="more-line" size="18" class="more"/>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item :command="1">新增分类</el-dropdown-item>
                      <el-dropdown-item v-if="data.id" :command="2">编辑分类</el-dropdown-item>
                      <el-dropdown-item v-if="data.id" :command="3">删除分类</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </template>
        </el-tree>
      </div>

      <div class="picture-container">
        <div class="picture-controls">
          <el-button type="success" icon="Select" :disabled="multipleSelection.length < 1">使用选中</el-button>
          <el-button type="primary" icon="UploadFilled">上传图片</el-button>
          <el-button type="warning" icon="DeleteFilled" :disabled="multipleSelection.length < 1">删除图片</el-button>
        </div>
        <el-scrollbar class="picture-list" height="410px">
          <el-space wrap :size="6">
            <div v-for="item in (dataList.slice((pageData.pageNum - 1) * pageData.pageSize, pageData.pageNum * pageData.pageSize))"
                 :key="item.id"
                 class="picture-item"
                 :class="{ selected: checkSelected(item) }"
                 @click="handlePictureClick(item)">
              <div class="picture-image">
                <img :src="item.url" alt=""/>
              </div>
              <div class="picture-name line-clamp-1">
                {{ item.name }}
              </div>
            </div>
          </el-space>
        </el-scrollbar>

        <div class="footer">
          <el-pagination v-if="dataList.length > 0"
                         :current-page="pageData.pageNum"
                         :page-size="pageData.pageSize"
                         :page-sizes="[15, 30, 50]"
                         :total="dataList.length"
                         background
                         class="table-pagination"
                         layout="total, sizes, prev, pager, next"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"/>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import useDialog from '@/hooks/use-dialog.ts';
import { SvgIcon } from '@/components/icon';
import { getAssetsImage } from '@/utils/util.ts';
import { reactive, ref } from 'vue';

const {dialogVisible, dialogTitle, dialogMode, dialogModeMap, dialogIconMap} = useDialog(false);

const file = getAssetsImage('file.png');

const props = defineProps({
  max: {
    type: Number,
    default: 1,
  },
});

const treeData = [
  {
    id: 0,
    pid: 0,
    name: '全部图片',
  },
  {
    id: 1,
    pid: 0,
    name: '商品图片',
    children: [
      {
        id: 11,
        pid: 1,
        name: '商品图片01商品图片01商品图片01',
      },
      {
        id: 12,
        pid: 1,
        name: '商品图片02',
      },
    ],
  },
];

export type ImageItemData = {
  id: number
  cateId: number;
  name: string
  url?: string;
  size: number;
  time: string
};

const dataList: ImageItemData[] = [
  {
    id: 1,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 2,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 3,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 4,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/d514c14bfa2f4bfdb299fca0d3817ddf.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 5,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 6,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 7,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 8,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/d514c14bfa2f4bfdb299fca0d3817ddf.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 9,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 10,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 11,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 12,
    cateId: 0,
    name: '运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 13,
    cateId: 0,
    name: '运费折扣运费折扣运费折扣运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 14,
    cateId: 0,
    name: '运费折扣运费折扣运费折扣运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 15,
    cateId: 0,
    name: '运费折扣运费折扣运费折扣运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
  {
    id: 16,
    cateId: 0,
    name: '运费折扣运费折扣运费折扣运费折扣.png',
    url: 'https:\\/\\/v5.crmeb.net\\/uploads\\/attach\\/2024\\/06\\/20240624\\/f7eb8b85150da22ad73b048a6d19e09d.png',
    size: 0,
    time: '2024-06-24 14:35:57'
  },
];

const pageData = reactive({
  pageNum: 1,
  pageSize: 15,
});
const handleSizeChange = (val: any) => {
  pageData.pageSize = val;
};
const handleCurrentChange = (val: any) => {
  pageData.pageNum = val;
};

/** 已选图片列表 */
const multipleSelection = ref<any[]>([]);
/** 处理图片点击事件 */
const handlePictureClick = (item: any) => {
  if (!item) return
  // 判断是否选中
  const selectIndex = multipleSelection.value.findIndex(it => it.id == item.id);
  if (selectIndex > -1) {
    multipleSelection.value.splice(selectIndex, 1);
  } else {
    // 如果最大选中为1 直接移除已选
    if (props.max == 1) {
      multipleSelection.value.splice(0, 1);
    }
    // 如果选中数目未到最大值，则添加
    if (multipleSelection.value.length < props.max) {
      multipleSelection.value.push(item);
    }
  }
};
/** 判断图片是否选中 */
const checkSelected = (item: any) => {
  return multipleSelection.value.length > 0 && multipleSelection.value.findIndex(it => it.id == item.id) > -1;
};

const dropdownCommand = (data: any, command: any) => {
  console.log('command =>', command, data)
  if (command == 1) {
    console.log('新增分类')
  } else if (command == 2) {
    console.log('编辑分类')
  } else if (command == 3) {
    console.log('删除分类')
  }
}

const loading = ref(false);

/** 打开弹窗 */
const open = async () => {
  dialogTitle.value = '图片管理';
  dialogVisible.value = true;
  multipleSelection.value = [];
  pageData.pageNum = 1;
  pageData.pageSize = 15;
};

// 提供 open 方法，用于打开弹窗
defineExpose({open})
</script>

<style lang="scss" scoped>
.upload-picture {
  width: 100%;
  height: 100%;
  background-color: var(--el-bg-color);

  .upload-body {
    padding-right: 0 !important;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
  }

  .category {
    width: 100%;
    border-right: 1px solid var(--el-border-color);
    min-width: 200px;
    max-width: max-content;
    margin-right: 3px;
  }

  .picture-container {
    width: 100%;
    height: 100%;
    margin-left: 3px;

    .picture-controls {
      width: 100%;
      min-height: 42px;
      padding: 0 13px 5px 13px;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .el-button {
        --el-button-font-weight: 400;
        --el-font-size-base: 12px;
        padding: 6px 12px;
        height: 28px;
        line-height: 28px;
      }
    }

    .picture-list {
      background-color: var(--el-bg-color-page);
      padding: 6px;
    }

    .picture-item {
      position: relative;
      width: 100px;
      height: 132px;
      cursor: pointer;
      border-radius: 3px;
      display: inline-block;
      background-color: var(--el-bg-color);
      border: 1px solid var(--el-bg-color);

      .picture-image {
        width: 100px;
        height: 100px;
        padding: 6px;

        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .picture-name {
        background-color: var(--el-bg-color);
        height: 24px;
        padding: 6px;
        font-size: 12px;
      }

      &.selected {
        border-color: var(--el-color-primary);
      }
    }

    .footer {
      padding: 5px 5px 0 5px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      min-height: 42px;
    }
  }

  :deep(.el-tree-node__content) {
    width: 100%;
    height: 32px;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    padding-right: 8px;

    .file-name {
      display: flex;
      align-items: center;
      font-size: 13px;
      width: 120px;

      .icon {
        width: 15px;
        height: 13px;
        margin-right: 6px;
      }
    }
  }
}


</style>
